/*登入页面*/
.Login{
    .main{
        width: 400px;
        margin: 200px auto;
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
        h3{
            color: #fff;
            font-size: 18px;
            text-align: center;
            height: 50px;
            line-height: 50px;
             background: linear-gradient(90deg, #0071ff, #00e0ff);
        }
        form{
            padding: 20px  40px  50px;
            box-sizing: border-box;
            .Top input{
                width: 100%;
                height: 36px;
                line-height: 36px;
                margin: 20px auto 0;
                outline: none;
                border: none;
                font-size: 14px;
                padding: 0 15px;
                box-sizing: border-box;
                
            }
            .btn1,.btn2{
                background: #F4F4F4;
                border-radius: 5px;
            }
            .btn3{
                border-radius: 5px;
                color: #fff;
                background: linear-gradient(90deg, #0071ff, #00e0ff);
                }
            .Btm{
                margin-top: 20px;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                a{color: #333;}
                input{
                    margin-bottom: 5px;
                }
                span{
                    a{  
                        display: inline-block;
                        color: #FF7403;
                        padding:0 10px;
                    }
                    a:nth-child(1){
                        border-right: 1px solid #FF7403;
                    }
                }
                
            }

        }
    }
}

/*地球动画效果*/
.earth {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    .content{
        width: 100%;
        height: 100vh;
        background: url(../../../img/地球2.jpg)no-repeat 0 0;
        background-size: 100%;
        animation: DiQiu 50s linear infinite;
    }
    .content::after{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.2);
    }

    @keyframes DiQiu {
        0%,100%{
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
    }
    span {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
        transform: rotate(315deg);
        animation: LiuXing 3s linear infinite;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
        @keyframes LiuXing{
            0%{transform: rotate(315deg) translateX(0);opacity: 1;}
            100%{transform: rotate(315deg) translateX(-1000px);opacity: 0;}
        }
        &:nth-child(1){
            top: 8%;
            left: 25%;
            animation-delay: 0;
            animation-duration: 1s;
        }
       &:nth-child(2){
            top: 17%;
            left: 35%;
            animation-delay: 0.2s;
            animation-duration: 1.5s;
        }
         &:nth-child(3){
            top: 24%;
            left: 45%;
            animation-delay: 0.3s;
            animation-duration: 2.5s;
        }
         &:nth-child(4){
            top: 15%;
            left: 60%;
            animation-delay: 0.2s;
            animation-duration: 2.6s;
        }
         &:nth-child(5){
            top: 20%;
            left: 65%;
            animation-delay: 0.6s;
            animation-duration: 1.8s;
        }
         &:nth-child(6){
            top: 25%;
            right: 500px;
            left: initial;
            animation-delay: 0.8s;
            animation-duration: 2.8s;
        }
         &:nth-child(7){
            top: 10%;
            right: 10%;
            left: initial;
            animation-delay: 0.9s;
            animation-duration: 2.5s;
        }
         &:nth-child(8){
            top: 22%;
            right: 5%;
            animation-delay: 0.6s;
            animation-duration: 1.8s;
        }
        &:nth-child(9){
            top: 18%;
            right: 15%;
            animation-delay: 0.2s;
            animation-duration: 1.8s;
        }
         &:nth-child(10){
            top: 30%;
            right: 18%;
            animation-delay: 0.5s;
            animation-duration: 1.6s;
            background: red;
        }
        &::after {
            content: "";
            width: 300px;
            height: 2px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
            background: linear-gradient(90deg,#fff,transparent);
        }
    }
}